<template>
  <div>
    <!-- 搜索框 -->
    <van-search shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white" style="height: 150px;">
      <van-swipe-item><van-image fit="scale-down"
          src="https://img1.baidu.com/it/u=2448083855,246146448&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=500" /></van-swipe-item>
      <van-swipe-item><van-image fit="scale-down"
          src="https://img1.baidu.com/it/u=2468573349,176549334&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" /></van-swipe-item>
      <van-swipe-item><van-image fit="scale-down"
          src="https://img2.baidu.com/it/u=3226578294,3349592328&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500" /></van-swipe-item>
      <van-swipe-item><van-image fit="scale-down"
          src="https://img0.baidu.com/it/u=1621227984,3671960276&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=331" /></van-swipe-item>
    </van-swipe>

    <!-- 九宫格 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image src="https://img0.baidu.com/it/u=1911459203,511049755&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" />
        <span>户外运动</span>

      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img0.baidu.com/it/u=1911459203,511049755&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" />
        <span>户外运动</span>

      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img0.baidu.com/it/u=1911459203,511049755&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" />
        <span>户外运动</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img0.baidu.com/it/u=1911459203,511049755&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" />
        <span>户外运动</span>

      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img0.baidu.com/it/u=1911459203,511049755&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" />
        <span>户外运动</span>

      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img0.baidu.com/it/u=1911459203,511049755&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" />
        <span>户外运动</span>

      </van-grid-item>
    </van-grid>

    <!-- 户外精品推荐 -->
    <div style="margin-bottom: 50px;">
      <h5 style="margin-left: 20px;">户外精品推荐</h5>
      <van-card tag="热门" price="200.00" desc="描述信息" title="商品标题"
        thumb="https://img0.baidu.com/it/u=680130849,2868739234&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
        origin-price="99999" />
      <van-card tag="热门" price="1699.00" desc="描述信息" title="商品标题"
        thumb="https://img0.baidu.com/it/u=2718825841,4281827366&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
        origin-price="19999" />
      <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
        thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
        origin-price="99999" />
    </div>
  </div>
</template>

<script lang="ts">

</script>

<script setup lang="ts">
import httpApi from "@/http";
import { onMounted } from "vue";
onMounted(() => {
  httpApi.shoplistApi.queryshoplist().then((res: any) => {
    console.log(res);
  })
}) 
</script>



<style lang="scss" scoped></style>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>